<template>
  <LoaDing v-if="flag"></LoaDing>
  <keep-alive v-else>
    <div class="films" ref="films">
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="details(item.filmId)"
      >
        <div class="left"><img :src="item.poster" /></div>
        <div class="middle">
          <div>{{ item.name }}</div>
          <div>
            <span>观众评分</span>
            <span>{{ item.grade }}</span>
          </div>
          <div>主演：{{ parseActors(item.actors) }}</div>
          <div>{{ item.nation }} | {{ item.runtime }}</div>
        </div>
        <div class="right">
          <span v-if="type === 1">购票</span>
          <span v-else>预约</span>
        </div>
      </div>
    </div>
  </keep-alive>
</template>

<script setup lang="ts">
import { defineProps, PropType, ref, defineEmits, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ListType, ActorType } from "../types/index";
import LoaDing from "./LoaDing.vue";

// 判断数据
const flag = ref<boolean>(true);
// 接收父传子参数
const props = defineProps({
  list: {
    type: Array as PropType<ListType[]>,
    default: () => [],
  },
  type: {
    type: Number,
    default: () => 0,
  },
});
// 过滤名字
const parseActors = (value: ActorType[]) => {
  let str = "";
  value.map((itm: { name: string }) => {
    str += itm.name + " ";
  });
  return str;
};
// 监听长度
if (props.list.length > 0) {
  flag.value = false;
}
// 判断滚动条
const debounce = (func: any, delay: any) => {
  let timer: any = null;
  return function () {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(() => {
      func(...arguments);
    }, delay);
  };
};
const films = ref<HTMLElement>();
const emit = defineEmits(["fang"]);
onMounted(() => {
  const fbx = films.value as HTMLElement;
  window.onscroll = debounce(() => {
    if (
      document.documentElement.scrollTop + window.innerHeight >
      fbx.scrollHeight
    ) {
      emit("fang");
    }
  }, 500);
});
// 跳转进入详情界面
const router = useRouter();
function details(id: number) {
  router.push("/film/" + id);
}
</script>
<style scoped lang="scss">
.films {
  padding-bottom: 60px;
  padding-top: 0;
  .item {
    margin-top: 15px;
    padding-bottom: 10px;
    padding-top: 10px;
    display: flex;
    color: #797d82;
    font-size: 13px;
    border-bottom: 1px solid #e7d8d8;
    background-color: #fff;

    .left {
      width: 77px;
      height: 100px;
      margin-left: 20px;

      img {
        width: 66px;
        height: 100%;
      }
    }

    .middle {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 55%;

      div:nth-of-type(1) {
        color: #191a1b;
        font-size: 16px;
      }

      div:nth-of-type(3) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .right {
      width: 15%;
      display: flex;
      align-items: center;
      margin-right: 20px;

      span {
        border: 1px solid #ff5f16;
        background: white;
        color: #ff5f16;
        border-radius: 2px;
        height: 25px;
        line-height: 25px;
        font-size: 13px;
        width: 50px;
        text-align: center;
      }
    }
  }
}
</style>
